<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar :border="false">
      <template #left>
        <svg
          width="105"
          height="30"
          viewBox="0 0 105 30"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <title>Page 1</title>
          <defs>
            <path id="a" d="M15.927.064H.165v9.07h15.762z" />
            <path id="c" d="M.279 7.819h17.334V.346H.28z" />
            <path id="e" d="M0 28.723h105V0H0z" />
          </defs>
          <g fill="none" fill-rule="evenodd">
            <g transform="translate(3.902 .291)">
              <mask id="b" fill="#fff"><use xlink:href="#a" /></mask>
              <path
                d="M1.813 9.085c-.057-.183.066-1.253.151-1.607.223-.922.661-1.816 1.777-2.46.955-.552 1.347.031 1.373.36.042.544-.195 1.14-.583 1.312-.006.012-.004.009 0 .006.002-.003.005-.006 0 .006 1.886-.189 2.613-1.774 3.548-2.247.76-.384.906.012.927.255.048.552-.315 1.003-.753 1.459.604-.056 1.086-.157 1.662-.518 1.054-.66 1.352-.621 1.46-.64 1.847-.323 2.977 2.059 2.904 4.123.643-.072 1.04-.101 1.595-.284.084-.04.065-1.545-.037-2.068-.322-1.638-.907-2.795-1.77-3.88-1.17-1.47-3.43-2.838-6.084-2.838-.852 0-1.745.141-2.655.464-1.763.627-3.202 1.915-4.173 3.556C.555 5.096.052 6.712.187 8.79c.723.144 1.16.286 1.626.296"
                fill="#1E923A"
                mask="url(#b)"
              />
            </g>
            <g transform="translate(3.193 21.26)">
              <mask id="d" fill="#fff"><use xlink:href="#c" /></mask>
              <path
                d="M15.832 5.222c-.624.656-1.539 1.154-2.49 1.068h-.02c-1.662 0-.24-2.306-.24-2.306s.514-.884 1.236-1.37c.69-.465 1.284-.444 1.697-.181.23.132.563.52.557 1.192-.004.438-.187.98-.74 1.597M4.438 6.304a2.19 2.19 0 0 1-.181.007c-.886 0-1.719-.488-2.295-1.11-.544-.624-.72-1.169-.717-1.607.003-.67.341-1.055.573-1.184.416-.258 1.01-.27 1.694.205C4.227 3.11 4.73 4 4.73 4s1.402 2.345-.291 2.303m13.158-2.839c-.155-1.168-.913-1.614-.901-1.67.061-.28.194-1.163.234-1.449a8.357 8.357 0 0 1-1.15.023c-.386-.011-.674-.023-.704.043-.079.175-.164.585-.297.933-2.065.493-2.91 2.98-3.008 3.11-.2.205-.556.313-.943.431-1.558.48-3.74.263-4.718-.483-.116-.255-.223-.44-.338-.695C5.06 2.498 4.248 1.704 3.315 1.4c-.072-.023-.267-.651-.336-.889C2.426.52 1.96.46 1.14.406c.058.337.123.977.181 1.313-.313.232-.655.545-.85 1.016-.727 1.768.752 3.434 1.796 4.03 1.998 1.144 3.375.297 3.433.279.269.127 1.396.773 3.243.775a8.302 8.302 0 0 0 2.438-.36c.588-.18.923-.361.926-.36 2.621 1.147 5.554-1.645 5.288-3.634"
                fill="#1E923A"
                mask="url(#d)"
              />
            </g>
            <path
              d="M23.817 7.32c-.22-.114-.716.222-.716.222s-2.438 2.148-7.897 1.863c-1.576-.082-2.97 1.34-2.97 1.34s-1.278-1.43-3.116-1.334C3.61 9.7 1.346 7.583 1.346 7.583S.97 7.285.69 7.285a.285.285 0 0 0-.145.035c-.267.152-.203.724-.203.724l.632 5.636c.216-.336.517-.622.92-.705l.05-.008-.177-1.36s-.2-1.224-.224-1.617c-.017-.272.008-.537.14-.654.292-.254 1.194.24 1.194.24s1.275.81 2.901.946c1.843.154 4.122.026 4.122.026s1.02-.034 1.467.505c.637.766.44 1.945.44 1.945l.017 8.06s-.003.523-.217.664c-.22.146-.65-.09-.65-.09s-.836-.417-2.283-.693c-3.605-.685-4.368-.158-5.484-1.03-.472-.367-.521-1.421-.521-1.421l-.306-2.328c-.324.285-.73.383-1.079.286l.396 3.532s.036.51.236.838c.236.389.642.607.642.607s.604.335 1.489.435c.65.073 1.568.07 2.495.068 1.135-.004 2.284-.007 2.97.13 1.216.243 1.886.77 1.886.77s.416.397.815.397c.406 0 .794-.398.794-.398s.896-.885 3.403-.88c2.241.006 3.684-.027 4.453-.18.621-.123 1.323-.485 1.622-.915.244-.35.24-.83.24-.83l.386-3.563c-.135.03-.28.03-.424 0a1.29 1.29 0 0 1-.633-.349l-.311 2.38s-.049 1.054-.521 1.422c-1.116.871-1.88.344-5.485 1.03-1.446.275-2.283.692-2.283.692s-.43.236-.65.09c-.213-.141-.217-.663-.217-.663l.017-8.06s-.196-1.18.44-1.946c.448-.539 1.468-.505 1.468-.505s2.279.128 4.121-.026c1.626-.136 2.901-.946 2.901-.946s.902-.494 1.194-.24c.133.117.158.382.14.654-.024.393-.224 1.618-.224 1.618l-.176 1.348c.304.035.613.197.851.482.037.044.07.092.103.14l.62-5.723s-.042-.441-.225-.535"
              fill="#EC6C2E"
            />
            <path
              d="M23.595 15.619c-.1.536-.512.717-.924.631-.766-.157-1.118-1.141-1.187-1.616-.226-1.55 1.076-1.844 1.744-1.045.438.524.475 1.462.367 2.03m.523-1.422c-.434-1.987-2.577-2.071-3.1-.657-.597 1.612.88 3.79 2.337 3.228.446-.172.743-.578.845-1.116.082-.436.025-.968-.082-1.455M.644 15.619c-.107-.568-.071-1.506.367-2.03.668-.799 1.97-.506 1.744 1.045-.068.475-.42 1.459-1.187 1.616-.412.086-.823-.095-.924-.631m-.523-1.422c-.107.487-.164 1.019-.081 1.455.101.538.398.944.844 1.116 1.457.561 2.934-1.616 2.338-3.228-.523-1.414-2.667-1.33-3.1.657m74.16 2.426c-2.593-1.907-3.99-4.829-4.192-8.765h1.58c.202 3.125 1.072 5.6 2.612 7.426v1.34zm-8.733 2.495l-.394-1.095h.56c.608.04.89-.222.851-.791V5.423h1.762v11.87c0 1.217-.648 1.825-1.944 1.825h-.835zm-5.24-2.495v-1.34c1.498-1.743 2.369-4.22 2.612-7.425h1.58c-.204 3.936-1.601 6.858-4.193 8.765zm21.75-5.265c0 .42.34.761.759.761h3.615c.608 0 .89-.305.85-.913V8.102H82.06v3.256zm4.982 7.578c-1.216.04-1.803-.548-1.763-1.765v-4.017H83.76v.182c.202 2.8-1.215 4.809-4.253 6.026v-1.035c1.944-.974 2.855-2.637 2.734-4.991v-.182c-.94 0-1.701-.764-1.701-1.705V7.067h1.276a8.506 8.506 0 0 1-.486-1.705h1.519c.04.57.182 1.137.425 1.705h2.916c.162-.568.304-1.136.425-1.705h1.458c-.081.65-.243 1.218-.486 1.705h1.215v4.078c.04 1.38-.607 2.05-1.944 2.009h-.06v3.956c-.082.609.238.791.972.791 1.039 0 1.032-.706 1.032-.706h1.033v.158c.001 1.032-.924 1.623-2.098 1.583h-.696zm-9.903-.609V10.26H75.74V9.164h2.856v7.215a7.092 7.092 0 0 0 1.944-.912v1.156c-.81.65-1.944 1.217-3.402 1.704zm26.124-11.26H101.5V12.3h.911c.608.041.89-.304.85-1.035v-4.2zM98.523 12.3h1.701V7.067h-1.7V12.3zm.668 6.574c-1.377 0-2.065-.63-2.065-1.887V5.97h7.472v5.295c.08 1.461-.588 2.152-2.005 2.07h-4.07v3.53c-.041.65.263.974.911.974h3.273c.608 0 1.019-.136 1.078-.73v-.257H105v.318c-.134 1.311-1.053 1.744-2.39 1.704h-3.42zm-6.014-2.896c0 .288.233.522.52.522h.391c.486.041.708-.202.668-.73v-8.4h-1.58v8.608zm-1.337.072V6.336h4.192v9.495c.04 1.178-.547 1.746-1.762 1.705h-.948a1.484 1.484 0 0 1-1.482-1.485z"
              fill="#1E923A"
            />
            <path
              d="M41.15 10.11a.57.57 0 0 0 .568-.57v-.465H30.6v.465c0 .315.255.57.569.57h9.98zM37.1 5.362h-1.822V6.58h-6.014v.525c0 .315.254.57.569.57h12.714a.57.57 0 0 0 .569-.57V6.58H37.1V5.362zm-5.636 9.739h9.451v2.07c0 .487-.304.73-.911.73h-7.83a.71.71 0 0 1-.71-.71V15.1zm-1.58 2.414a1.42 1.42 0 0 0 1.418 1.421h9.248c1.296.04 1.924-.569 1.884-1.826v-3.043h-12.55v3.448zm.716-5.479c0 .315.255.57.569.57h9.98a.57.57 0 0 0 .57-.57v-.465h-11.12v.465zm18.773-3.448c-.364-.08-.83-.122-1.397-.122V5.301h-1.458v14.06h1.458V9.563c.486.04.95.122 1.397.244V8.588zm-5.001 4.748l1.407.3c.12-1.622.192-3.709.192-5.656H45c0 1.664-.222 3.582-.627 5.356m5.425-.555v4.42c0 .828.312 1.914 1.519 2.1 1.096.17 2.368-.024 3.262-1.662.857-1.572.193-3.084-1.081-3.128-1.085-.036-1.378 1.265-.65 1.825.312.24.55 1.141 0 1.653-.453.42-1.531.583-1.531-.632v-4.169c0-.154.124-.278.277-.278h4.766v3.625c0 1.067-.334 1.06-.763 1.601l.003.002c-.354.41-.541.88-.483 1.365.086.713.568.794.626.389.081-.567.615-1.037 1.216-1.242.636-.242.947-.798.92-1.685v-5.029h-7.237a.844.844 0 0 0-.844.845"
              fill="#EB651C"
            />
            <path
              d="M54.598 10.17V9.015h3.016a.57.57 0 0 0 .568-.57v-.342h-3.584V7.067h3.44a.57.57 0 0 0 .57-.57v-.344h-4.01v-.852H53.14v.852h-3.828v.344c0 .314.255.57.569.57h3.259v1.035h-3.463v.343c0 .314.254.57.568.57h2.895v1.156h-4.193v.343c0 .315.255.57.57.57h8.704a.569.569 0 0 0 .569-.57v-.343h-4.192z"
              fill="#EB651C"
            />
            <path
              d="M79.11 6.528a1.354 1.354 0 1 1-1.353-1.355c.747 0 1.353.606 1.353 1.355"
              fill="#1E923A"
            />
            <mask id="f" fill="#fff"><use xlink:href="#e" /></mask>
            <path
              fill="#71737B"
              mask="url(#f)"
              d="M30.107 25.398h7.095v-.326h-7.095zm11.403.174v-.38l.233-.636h-1.226v-.381h1.395l.275-.699h-1.353v-.402h1.5l.276-.678h.444l-.275.678h2.43v.402h-2.6l-.274.699h3.213v.38h-3.361l-.254.636h3.001v.403l-1.352 1.164c.24.085.472.19.698.318l-.254.381a41.408 41.408 0 0 0-2.494-1.207l.211-.339c.45.198.937.424 1.459.678l1.162-1.017h-2.853zm8.186.022c.267-.523.556-1.222.866-2.097l.402.17c-.38.988-.684 1.687-.909 2.096l-.36-.17zm-2.98-2.097c.296.706.563 1.405.802 2.097l-.401.169c-.24-.72-.5-1.433-.782-2.139l.38-.127zm2.366-1.016h.424v4.235h1.67v.36h-5.052v-.36h1.648V22.48h.423v4.235h.887V22.48zm3.98 2.774h.698v-.7h-.698zm3.621 1.545h2.937v-.889h-2.937v.89zm-.402-1.249h3.741v1.864h-.402v-.297h-2.937v.297h-.402V25.55zm-.084-.466h3.973v-.36h-3.973v.36zm0-.805h3.973v-.338h-3.973v.338zm-.529-1.164h2.41a.767.767 0 0 1-.043-.106 2.796 2.796 0 0 0-.253-.508l.401-.149c.127.226.24.445.339.657l-.296.106h2.43v.381h-4.988v-.381zm7.784 3.071h2.113v-.382h-2.113v.382zm0-.7h2.113v-.36h-2.113v.36zm0 1.885h-.381V24.81h2.875v1.948c.014.395-.198.586-.635.572h-.74a.354.354 0 0 0-.02-.085 1.174 1.174 0 0 0-.064-.296h.317c.183.014.331.021.444.021.225.014.33-.064.317-.233v-.254h-2.113v.89zm-.423-3.875h1.289v-.36H62.88v-.296h1.437v-.466h.38v.466h1.544v.296h-1.543v.36h1.395v.318h-1.395v.36h1.648v.317h-3.593v-.318h1.564v-.36h-1.29v-.317zm-1.057-1.08h.38v1.038l.106-.106c.155.113.33.275.528.487l-.232.254a4.099 4.099 0 0 0-.402-.423v3.726h-.38v-4.976zm-.508 1.122l.34.064a41.3 41.3 0 0 1-.234 1.356 5.837 5.837 0 0 0-.338-.085c.098-.424.176-.869.232-1.335zm12 3.452l-1.183-1.651a15.13 15.13 0 0 0-.149-.255.482.482 0 0 0-.063.127.923.923 0 0 0-.085.128l-1.224 1.65h-.592l1.67-2.16-1.459-2.075h.55l1.036 1.503.126.254a.225.225 0 0 0 .042.085c.057-.099.127-.212.212-.339l1.014-1.503h.571l-1.5 2.075 1.648 2.16h-.613zm3.249-3.896c-.662.014-1.007.254-1.035.72-.015.353.345.607 1.077.762 1.156.212 1.705.65 1.65 1.313-.072.734-.593 1.122-1.565 1.165-1.043.028-1.649-.395-1.818-1.271l.486-.17c.099.735.536 1.088 1.31 1.06.691-.014 1.05-.283 1.079-.805.07-.395-.324-.678-1.184-.847-1.07-.212-1.578-.615-1.522-1.207.056-.72.55-1.101 1.48-1.144.916 0 1.458.388 1.628 1.165l-.508.148c-.155-.593-.514-.89-1.078-.89m4.307-.021c-.466.029-.719.269-.762.72.015.523.268.798.761.826.466-.013.712-.275.74-.783-.042-.466-.289-.72-.74-.763M81 24.958c-.564.029-.874.34-.93.932.056.508.372.784.95.826.578-.042.895-.303.952-.784-.042-.62-.367-.945-.973-.974m-.57-.17c-.423-.197-.649-.514-.677-.952.056-.72.48-1.101 1.268-1.144.762.057 1.177.438 1.248 1.144-.029.452-.24.77-.634.953.52.198.795.579.824 1.143-.042.72-.522 1.094-1.438 1.123-.93-.029-1.409-.417-1.437-1.165.042-.55.324-.917.846-1.101m3.438 2.181h.655v-.614h-.655zm5.299-1.44l.55.127c-.268.918-.881 1.383-1.84 1.398-1.211-.071-1.852-.77-1.923-2.096.057-1.44.712-2.196 1.966-2.267.803.029 1.374.438 1.712 1.229l-.528.127c-.254-.607-.663-.918-1.226-.932-.86.084-1.332.685-1.416 1.8.056 1.087.52 1.673 1.395 1.758.69-.028 1.127-.41 1.31-1.144m4.686 1.461l-2.198-3.388a1.957 1.957 0 0 1-.19-.424h-.021c.042.17.064.403.064.7v3.112h-.466v-4.235h.55l2.177 3.41c.084.14.14.254.169.338h.021a4.944 4.944 0 0 1-.042-.657v-3.091h.465v4.235h-.529zm3.746-1.593h7.094v-.326h-7.094z"
            />
          </g>
        </svg>
      </template>
      <template #right>
        <van-icon @click="toLogin" class="m-r-4" name="manager-o" size="23" />
        <van-icon @click="toLogin" name="coupon-o" size="23" />
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
      <van-swipe-item>
        <img src="../img/l1.jpg" width="100%" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img width="100%" src="../img/l2.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img width="100%" src="../img/l3.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img width="100%" src="../img/l4.jpg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索 -->
    <van-cell :border="false" @click="showPopup">
      <van-search placeholder="傲气如我" input-align="center" shape="round" />
    </van-cell>
    <van-popup v-model="show">这是内容的辣</van-popup>
    <!-- 图标导航 -->
    <van-grid column-num="5" :gutter="10" :border="false">
      <van-grid-item @click="toType('type')">
        <p class="m-b-1"></p>
        <p ref="toType">分类</p>
      </van-grid-item>
      <van-grid-item @click="toType('phb')">
        <p class="m-b-1"></p>
        <p ref="toType">排行榜</p>
      </van-grid-item>
      <van-grid-item @click="toType('fl')">
        <p class="m-b-1"></p>
        <p ref="toType">福利</p>
      </van-grid-item>
      <van-grid-item @click="toType('newbook')">
        <p class="m-b-1"></p>
        <p>新书</p>
      </van-grid-item>
      <van-grid-item @click="toType('finallybook')">
        <p class="m-b-1"></p>
        <p>完本</p>
      </van-grid-item>
    </van-grid>
    <!-- 广告 -->
    <div><img width="100%" src="../img/0.jpg" alt="" /></div>
    <!-- 热门小说 -->
    <h2 class="hot p-l-4 m-t-3 m-b-4">热门小说</h2>
    <div class="hotCon m-l-4">
      <div class="imgl m-r-3">
        <img width="74px" src="../img/150.jpg" alt="" />
      </div>
      <div class="conr m-r-4">
        <h3>快穿女尊系统之宠夫成瘾</h3>
        <p>
          （快穿+女尊+甜宠+一对一双洁）“殿下，有人收买门房。”管家将手里的银锭子交到白染手中。“呵……一个银锭子就想打探本殿的底细吗？”冷笑一声，世人真是怕她不死啊！只是她摄政王府的下人是这么容易买通的吗？“不，不是。”管家连连摆手。“嗯？”白染蹙眉。“那人想要打听的是主子您身量几何，几更入睡几更起，喜辣喜甜还是喜酸，几时开始习武练剑，琴棋书画更爱哪个，喜欢风花雪月还是对影独酌……”白染嘴角缓缓勾起：“
        </p>
      </div>
    </div>
    <!-- 最近阅读 -->
    <van-cell @click="show2 = !show2">
      <div class="readnow">
        最近
        <br />
        阅读
      </div>
    </van-cell>
    <van-popup
      v-model="show2"
      position="right"
      :style="{ height: '100%', width: '80%' }"
    >
      <p class="ydjl">阅读记录</p>
      <p class="ydjlcon">暂无阅读记录</p>
      <div @click="toLogin" class="login">登录去书架</div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['login']),
  },
  data() {
    return {
      show: false,
      show2: false,
    }
  },
  methods: {
    showPopup() {
      this.show = true
    },
    toLogin() {
      this.$router.push('/login')
    },
    toType(val) {
      if (!this.login) {
        alert('请您先登录')
        this.$router.push('/login')
      } else {
        this.$router.push(val)
      }
    },
  },
}
</script>

<style lang="scss">
.readnow {
  width: 2.75rem;
  height: 2.75rem;
  line-height: 1.16667;
  box-sizing: border-box;
  padding: 0.5rem;
  background-color: #65c541;
  color: #fff;
  border-radius: 99px;
  font-size: 0.75rem;
  text-align: center;
  position: fixed;
  bottom: 100px;
  right: 15px;
}
.van-grid {
  div:nth-child(1) {
    p + p {
      font-size: 12px;
    }
    p:first-child {
      width: 46px;
      height: 46px;
      background: url('../img/ico.png');
      background-size: 227px 179px;
      background-position: -54px 0px;
    }
  }
  .van-grid-item:nth-child(2) {
    p:first-child {
      background-position: -104px 0px;
    }
  }
  .van-grid-item:nth-child(3) {
    p:first-child {
      background-position: 0px -97px;
    }
  }
  .van-grid-item:nth-child(4) {
    p:first-child {
      background-position: -54px 0px;
    }
  }
  .van-grid-item:nth-child(5) {
    p:first-child {
      background-position: -154px 0px;
    }
  }
}
.hot {
  font-size: 18px;
  color: #000;
}
.hotCon {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.conr {
  p {
    margin-top: 15px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.1875rem;
    height: 2.25rem;
    font-size: 12px;
    color: grey;
  }
}
.ydjl,
.login,
.ydjlcon {
  text-align: center;
}
.ydjl {
  margin-top: 30px;
}
.login {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 225px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  color: #fff;
  background: #65c541;
  transform: translateX(-50%);
}
</style>
